<template>
	<zui-watermark content="东莞宏悦酒业" :overlay="0.5" :opacity="0.08" ></zui-watermark>
	<Navbar page-name="登录注册" :top="16" autoBack>
		<template #area>
			<view class="sign-form-box">
				<u-text bold size="18" color="#000" text="注册用户信息"></u-text>
				<view class="form-box">
					<up-form labelPosition="top" labelWidth="120" :label-style="labelStyle" :model="form"
						ref="sign-form-ref" :rules="rules">
						<view class="form-item-box">
							<up-form-item label="姓氏" prop="surname" required>
								<up-input v-model="form.surname" border="none" placeholder="姓*"
									:custom-style="inputStyle"></up-input>
							</up-form-item>
							<up-form-item label="名字" prop="name" required>
								<up-input v-model="form.name" border="none" placeholder="名*"
									:custom-style="inputStyle"></up-input>
							</up-form-item>
						</view>
						<up-form-item label="性别" prop="sex">
							<picker :range="range" range-key="label" @change="sexChange">
								<up-input v-model="form.sex" border="none" readonly placeholder="请选择"
									:custom-style="inputStyle"></up-input>
							</picker>
						</up-form-item>
						<up-form-item label="电话" prop="phone" required>
							<view class="u-flex u-flex-items-center">
								<up-input v-model="form.phone" maxlength="11" placeholder="授权微信手机号" border="none"
									:custom-style="inputStyle">
								</up-input>
								<up-button text="授权手机号" size="small" :custom-style="{
									borderRadius: '0',
									height: '34px',
									width: '100px',
									backgroundColor: '#000',
									color: '#fff',
									marginTop: '10px',
								}" openType="getPhoneNumber" @getphonenumber="AuthPhone" ></up-button>
							</view>
						</up-form-item>
						<up-form-item label="出生日期" prop="birthDate">
							<picker mode="date" @change="birthDateChange">
								<up-input v-model="form.birthDate" readonly border="none" placeholder="请选择"
									:custom-style="inputStyle"></up-input>
							</picker>
						</up-form-item>
					</up-form>
				</view>
				<view class="checkbox-group-box">
					<up-checkbox-group placement="column" activeColor="#000" v-model="checkAgree">
						<view class="u-flex u-flex-items-center">
							<up-checkbox name="01"></up-checkbox>
							<u-text size="10" text="我已仔细阅读、理解并同意《宏悦酒业隐私政策》"></u-text>
						</view>
						<view class="u-flex u-flex-items-center u-m-t-20">
							<up-checkbox name="02"></up-checkbox>
							<u-text size="10" text="我同意接受宏悦酒业产品和服务的转述信息"></u-text>
						</view>
					</up-checkbox-group>
				</view>
			</view>
			<view class="btn-box">
				<up-button text="返回" @click="back" :customStyle="btnStyle"></up-button>
				<up-button text="完成注册" :customStyle="btnStyle" @click="subSign"></up-button>
			</view>
		</template>
	</Navbar>

</template>

<script setup>
	import {
		getCurrentInstance,
		reactive,
		ref,
		toRefs
	} from 'vue';
	import Navbar from '@/components/Navbar.vue';
	import Utils from '@/Util/common.js';
	import Store from '@/Store/index.js';
	const {
		proxy
	} = getCurrentInstance()
	import SignApi from '@/Api/Sign.js'

	const inputStyle = {
		backgroundColor: '#F5F5F5',
		padding: '5px 12px',
		marginTop: '10px',
		fontSize: '12px',
		borderRadius: '0',
		position: 'relative'
	}
	const labelStyle = {
		fontSize: '12px',
		color: '#000',
	}
	const btnStyle = {
		backgroundColor: '#000',
		color: '#fff',
		borderRadius: '0',
		fontSize: '14px',
		fontWeight: 'bold',
		height: '44px',
		lineHeight: '44px'
	}
	const range = [{
		label: '男',
		value: 1
	}, {
		label: '女',
		value: 2
	}]

	const checkAgree = ref([])
	const data = reactive({
		form: {
			surname: '',
			name: '',
			sex: '',
			phone: '',
			birthDate: '',
			code: ''
		},
		rules: {
			surname: [{
				required: true,
				message: '姓氏不能为空',
				trigger: 'blur'
			}],
			name: [{
				required: true,
				message: '请输入名字',
				trigger: 'blur'
			}],
			phone: [{
				required: true,
				message: '电话不能为空或格式错字',
				len: 11,
				pattern: /^1[3456789]\d{9}$/,
				trigger: 'blur'
			}]
		}
	})
	const {
		form,
		rules
	} = toRefs(data);

	const back = () => {
		uni.navigateBack()
	}

	const sexChange = (e) => {
		form.value.sex = range[e.detail.value].label
	}

	const birthDateChange = (e) => {
		form.value.birthDate = e.detail.value
	}

	const AuthPhone = (e) => {
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			const code = e.detail.code
			SignApi.AuthPhone(code).then(resp => {
				form.value.phone = resp.data.phone
			})
			return
		}
		Utils.toast('授权失败：' + e.detail.errMsg )
	} 

	const subSign = () => {
		proxy.$refs["sign-form-ref"].validate().then(valid => {
			if (!valid) {
				return
			}
			if (checkAgree.value.length < 2) {
				Utils.toast('请阅读并同意协议与政策')
				return
			}
			uni.login({
				success(logRes) {
					form.value.code = logRes.code
					Store.dispatch('Sign', form.value).then(() => {
						signSuccess()
					}).catch((err) => {
						Utils.toast('注册失败')
					})
				},
				fail() {
					Utils.toast('注册失败')
				}
			})
		})
	}

	const signSuccess = () => {
		Store.dispatch('GetUserInfo').then(() => {
			Utils.toast('注册成功')
			uni.$u.sleep(300).then(() => {
				uni.switchTab({
					url: '/pages/Mine'
				})
			})
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5 !important;
	}

	:scope {
		.sign-form-box {
			background-color: #fff !important;
			padding: 28px 26px;

			.form-box {
				padding-top: 20px;

				.form-item-box {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-gap: 15px;
				}
			}

			.checkbox-group-box {
				margin-top: 30px;
			}
		}

		.btn-box {
			margin-top: 40px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20px;
		}
	}

	.input-placeholder {
		color: #DCDCDC !important;
		font-size: 26rpx !important,
	}
</style>